<template>
	<custom-page :title="(type=='start')?'开始服务':'结束服务'" backgroundColor="#F9F9FB">
		<template #content>
			<view class="page-content">
				<view class="center-layout">
					<view class="title-row">
						<view class="indicator"></view>
						<view class="title">服务凭证上传</view>
					</view>
					<view class="flex-wrap-row">
						<view class="image-info-row" v-for="(item, index) in imageList" @click="imagePreviewClick(imageList, index)">
							<image class="image-info" :src="item" mode="aspectFill"></image>
							<image class="delete" :src="asserts.ic_delete" @click.stop="deleteImage(index)"></image>
						</view>
						<view v-if="imageList.length<2">
							<custom-choose-media @selectBack="selectImage">
								<template #content>
									<view class="file-add-layout">
										<image :src="asserts.ic_add_upload"></image>
									</view>
								</template>
							</custom-choose-media>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template #foot>
			<custom-bottom-button text="保存" @confirm="confirmClick"></custom-bottom-button>
		</template>
	</custom-page>
</template>

<script>
	import {
		apis
	} from '../../global/config.js'
	export default {
		data() {
			return {
				type: '',
				orderNo: '',
				imageList: [],
			}
		},
		onLoad(val) {
			this.type = val.type
			this.orderNo = val.orderNo
		},
		methods: {
			//图片选择
			selectImage(data){
				let avatarUrl = data.data
				let uploadParams = {
					operateType: 1,		//oss操作类型枚举 1-用户 2-商品 3-展现
					ossStorageType: 1,		//oss存储类型枚举 1-图片 2-文本 3-视频	
				}
				// #ifdef H5 || APP-PLUS
				uni.showLoading({
					title:'加载中'
				})
				uni.uploadFile({
					url: apis.uploadFile, //上传文件接口地址
					filePath: avatarUrl,
					formData: uploadParams,
					name: 'file',
					success: (uploadFileRes) => {
						uni.hideLoading()
						if(uploadFileRes.statusCode == '200'){
							let uploadFileResFor = JSON.parse(uploadFileRes.data)
							this.imageList.push(uploadFileResFor.data.fileUrl)
						}
					}
				});
				// #endif
				// #ifdef MP
				this.requestCenter.uploadFile(avatarUrl, uploadParams).then(upload => {
					if (upload) {
						this.imageList.push(upload.fileUrl)
					}
				})
				// #endif
			},
			
			//图片预览
			imagePreviewClick(urls, index){
				uni.previewImage({
					urls: urls,
					current: index
				})
			},
			
			//删除图片
			deleteImage(index){
				this.imageList.splice(index, 1)
			},
			
			//点击确定
			confirmClick(){
				if(this.imageList.length <= 0){
					uni.showToast({
						title: "请上传服务凭证"
					})
					return
				}
				let params = {
					orderNo: this.orderNo,
					pictureUrl: this.imageList.join(',')
				}
				console.log("params: " + JSON.stringify(params));
				if(this.type=='start'){
					uni.showModal({
						title: '确定开始服务吗？',
						success: (modal) => {
							if (modal.confirm) {
								this.requestCenter.startOrderService(params).then(res => {
									uni.showToast({
										title: "成功",
										duration: 500,
										complete: () => {
											uni.$emit('refreshOrder')
											uni.navigateBack()
										}
									})
								})
							}
						}
					})
				}else{
					uni.showModal({
						title: '确定结束服务吗？',
						success: (modal) => {
							if (modal.confirm) {
								this.requestCenter.endOrderService(params).then(res => {
									uni.showToast({
										title: "成功",
										duration: 500,
										complete: () => {
											uni.$emit('refreshOrder')
											uni.navigateBack()
										}
									})
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.center-layout{
		display: flex;
		flex-direction: column;
		padding: 0 32rpx;
		box-sizing: border-box;
		background-color: white;
	}
	.title-row{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 32rpx 0;
		box-sizing: border-box;
		.indicator{
			width: 6rpx;
			height: 32rpx;
			background: #01CBFF;
			border-radius: 10rpx;
			margin-right: 12rpx;
		}
		.title{
			font-size: 32rpx;
			color: #021624;
			line-height: 44rpx;
		}
	}
	.flex-wrap-row{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		.image-info-row{
			position: relative;
			width: 336rpx;
			height: 336rpx;
			margin-bottom: 32rpx;
			.image-info{
				width: 336rpx;
				height: 336rpx;
				border-radius: 16rpx;
			}
			.delete{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: -5rpx;
				right: -5rpx;
			}
		}
		.file-add-layout{
			width: 336rpx;
			height: 336rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 16rpx;
			background-color: #F5F5F5;
			margin-bottom: 32rpx;
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
</style>
